import {Form, Input} from 'antd';
import {StudentFormData} from "../services/types.ts";
import {useEffect, useRef} from "react";

interface StudentFormProps {
    fromData: StudentFormData;
    onChange: (student: StudentFormData) => void;
}

export const StudentForm = (
    {fromData, onChange}: StudentFormProps
) => {
    const [form] = Form.useForm()

    // 用于标记是否是外部更新，在外部更新表单时不触发onChange回调
    const isExternalUpdate = useRef(false);


    // 当formData变化时，更新表单
    useEffect(() => {
        if (form && fromData) {
            isExternalUpdate.current = true; // 开始外部更新
            form.setFieldsValue(fromData);
            // 由于setFieldsValue是异步的，所以我们需要在下一个事件循环关闭标记
            // 但是setFieldsValue不会立即触发onValuesChange，它会在下次渲染时触发，所以我们在当前事件循环的末尾关闭
            setTimeout(() => {
                isExternalUpdate.current = false;
            }, 0);
        }
    }, [fromData]);
    return (
        <Form
            form={form}
            layout="vertical"
            initialValues={fromData}
            onValuesChange={(_, values) => onChange && onChange(values)}
        >
            <Form.Item
                name="name"
                label="姓名"
                rules={[{
                    required: true, message: '请输入姓名'
                },
                    {max: 20, message: "名字最长20个字符"},
                    {min: 2, message: "名字最少2个字符"}]}>
                <Input placeholder="例如迪丽热巴"/>
            </Form.Item>

            <Form.Item
                name="student_id"
                label="学号"
                rules={[{
                    required: true, message: '请输入学号'
                },
                    {max: 20, message: "学号最长20个字符"},
                    {min: 2, message: "学号最少8个字符"}]}>
                <Input placeholder="20591020000"/>
            </Form.Item>

            <Form.Item
                name="birthday"
                label="生日"
                rules={[{
                    required: true, message: '请输入生日'
                }]}>
                <Input placeholder="例如2025年7月2日"/>
            </Form.Item>

            <Form.Item
                name="class"
                label="班级"
                rules={[{
                    required: true, message: '请输入班级'
                }]}>
                <Input placeholder="例如三年级一班"/>
            </Form.Item>



        </Form>)
}